import React, { Component } from "react";
import "./Duanzi.css";
//导入 axios 的包
import axios from 'axios';
export default class Duanzi extends Component {

    state = {
        // duanzis: []  {}  ''
        duanzis: []
    }

    render() {
        return (
            <div className="duanzi-container">
                <h2>段子列表</h2>
                <hr />
                <table border="1">
                    <thead>
                        <tr><td>ID</td><td>作者</td><td>内容</td></tr>
                    </thead>
                    <tbody>
                        {
                            this.state.duanzis.map(item => {
                                return <tr key={item.id}><td>{item.id}</td><td>{item.name}</td><td>{item.text}</td></tr>
                            })
                        }
                    </tbody>
                </table>
            </div>
        );
    }

    //生命周期钩子
    async componentDidMount(){
        let res = await axios('http://api.xiaohigh.com/duanzi');
        // console.log(res.data);
        this.setState({
            duanzis: res.data
        })
    }
}
